<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>任务四、五</title>

	<style type="text/css">
		.content {
			width: 500px;
			margin: 200px auto;
		}
		ul li {
			list-style: none;
			display: inline-block;
			background-color: #f00;
			padding: 8px;
			color: #fff;
			margin: 10px;
			cursor: pointer;
			vertical-align: bottom;
		}
	</style>
</head>
<body>
<div class="content">
	<div class="operate">
		<input type="number" id="number">
		<input type="button" value="左侧入" id="left-in">
		<input type="button" value="右侧入" id="right-in">
		<input type="button" value="左侧出" id="left-out">
		<input type="button" value="右侧出" id="right-out">
		<input type="button" value="排序" id="sort">
	</div>
	<ul id="queue">
	</ul>
</div>

<script type="text/javascript">

	function addLeft(direction){
		var data = document.getElementById("number").value;
		if(data == "")
			return;
		if(data<10||data>100){
			alert("字数范围在10---100");
			return;
		}
		var queue = document.getElementById("queue");
		if(queue.getElementsByTagName("li").length>=60){
			alert("最多添加60个元素");
			return;
		}
		var node = document.createElement("li");
		var para = document.createTextNode(data);
		node.appendChild(para);
		node.style.height = data+"px";
		var firstchild = queue.firstChild;
		queue.insertBefore(node,firstchild);
	}
	function addRight(){
		var data = document.getElementById("number").value;
		if(data == "")
			return;
		if(data<10||data>100){
			alert("字数范围在10---100");
			return;
		}
		var queue = document.getElementById("queue");
		if(queue.getElementsByTagName("li").length>=60){
			alert("最多添加60个元素");
			return;
		}
		var queue = document.getElementById("queue");
		var node = document.createElement("li");
		node.style.height = data+"px";
		var para = document.createTextNode(data);
		node.appendChild(para);
		queue.appendChild(node);
	}
	function deleteLeft(direction){
		var queue = document.getElementById("queue");
		var firstchild = queue.firstChild;
		alert(firstchild.innerHTML);
		queue.removeChild(firstchild);
	}
	function deleteRight(direction){
		var queue = document.getElementById("queue");
		alert(queue.lastChild.innerHTML);
		queue.removeChild(queue.lastChild);
	}
	function sortData(){
		var queue = document.getElementById("queue");
		var list = queue.getElementsByTagName("li");
		var datalist = [];
		for(var i = 0;i<list.length;i++){
			datalist[i] = list[i].innerHTML;
		}
		queue.innerHTML="";
		for(var i = datalist.length-1; i>0; i--){
			for(var j = 0; j<i; j++){
				if(datalist[j] > datalist[j+1]){
					var temp = datalist[j+1];
					datalist[j+1] = datalist[j];
					datalist[j] = temp;
				}
			}
		}
		var docFrag = document.createDocumentFragment();
		for(var i = 0; i<datalist.length; i++){
			var node = document.createElement("li");
			var para = document.createTextNode(datalist[i]);
			node.appendChild(para);
			node.style.height=datalist[i]+"px";
			docFrag.appendChild(node);
		}
		queue.appendChild(docFrag);
		console.log(datalist);
	}
	function init(){
		var leftin = document.getElementById("left-in");
		var leftout = document.getElementById("left-out");
		var rightin = document.getElementById("right-in");
		var rightout = document.getElementById("right-out");
		var sort = document.getElementById("sort");
		var queue = document.getElementById("queue");
		queue.addEventListener("click",function(e){
			if(e.target.nodeName.toLowerCase() == "li")
				queue.removeChild(e.target);
		});
		leftin.addEventListener("click",addLeft);
		leftout.addEventListener("click",deleteLeft);
		rightin.addEventListener("click",addRight);
		rightout.addEventListener("click",deleteRight);
		sort.addEventListener("click",sortData);
	}
	init();
</script>	
</body>
</html>